@import '@bifrostui/styles/mixins/index.less';

.btn-icon() {
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
}

.btn-outline(@color) {
  color: var(~'--bui-color-@{color}');
  border-color: var(~'--bui-color-@{color}');
}

.btn-contained(@color) {
  color: var(--bui-color-white);
  .linear-gradient(var(~'--bui-color-@{color}-start'), var(~'--bui-color-@{color}-end'));
}

.btn-light(@color) {
  background-image: none;
  border: var(--light-border);
  color: var(~'--bui-color-@{color}');
  background-color: var(~'--bui-color-@{color}-light');
}

.btn-text(@color) {
  color: var(~'--bui-color-@{color}');
}

.bui-btn {
  --border-radius: var(--bui-button-border-radius, 100px);
  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
  --height: var(--bui-button-height, 27px);
  --icon-start-margin-right: var(
    --bui-button-icon-start-margin-right,
    var(--bui-spacing-xs)
  );
  --icon-start-margin-left: var(
    --bui-button-icon-start-margin-left,
    var(--bui-spacing-xs)
  );
  --default-border: var(--bui-button-default-border, 1px solid transparent);
  --light-border: var(--bui-button-light-border, 1px solid transparent);
  --outlined-default-border: var(
    --bui-button-outlined-default-border,
    1px solid var(--bui-color-neutral-4)
  );
  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
  --small-padding: var(--bui-button-small-padding, 0 11px);
  --small-height: var(--bui-button-small-height, 24px);
  --medium-padding: var(--bui-button-medium-padding, 0 14px);
  --large-padding: var(--bui-button-large-padding, 0 14px);
  --large-height: var(--bui-button-large-height, 33px);
  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
  --full-height: var(--bui-button-full-height, 42px);
  border: var(--default-border);
  outline: 0;
  background-color: transparent;
  cursor: pointer;
  color: var(--text-color);
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--bui-text-size-3);
  font-weight: var(--bui-font-weight-medium);
  border-radius: var(--border-radius);
  height: var(--height);
  line-height: var(--bui-line-height);
  font-family: var(--bui-font-family);

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  &::after {
    border: 0;
  }

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: var(--bui-color-black);
    border: inherit;
    border-color: var(--bui-color-black);
    border-radius: inherit;
    transform: translate(-50%, -50%);
    opacity: 0;
    content: ' ';
  }

  &:active::before {
    opacity: 0.04;
  }

  &-icon-start {
    .btn-icon();
    margin-right: var(--icon-start-margin-right);
  }

  &-icon-end {
    .btn-icon();
    margin-left: var(--icon-start-margin-left);
  }

  &-disabled {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }

  &-small {
    font-size: var(--bui-text-size-4);
    padding: var(--small-padding);
    height: var(--small-height);
  }

  &-medium {
    padding: var(--medium-padding);
    height: var(--height);
  }

  &-large {
    font-size: var(--bui-text-size-2);
    padding: var(--large-padding);
    height: var(--large-height);
  }

  &-full {
    font-size: var(--full-font-size);
    width: 100%;
    height: var(--full-height);
  }

  &-text {
    &.bui-btn-primary {
      .btn-text(primary);
    }

    &.bui-btn-success {
      .btn-text(success);
    }

    &.bui-btn-info {
      .btn-text(info);
    }

    &.bui-btn-warning {
      .btn-text(warning);
    }

    &.bui-btn-danger {
      .btn-text(danger);
    }

    &.bui-btn-vip {
      .btn-text(vip);
    }
  }

  &-contained {
    background-color: var(--bg-color);

    &.bui-btn-primary {
      .btn-contained(primary);
    }

    &.bui-btn-success {
      .btn-contained(success);
    }

    &.bui-btn-info {
      .btn-contained(info);
    }

    &.bui-btn-warning {
      .btn-contained(warning);
    }

    &.bui-btn-danger {
      .btn-contained(danger);
    }

    &.bui-btn-vip {
      color: #582331;
      background-image: linear-gradient(
        90deg,
        var(--bui-color-vip-start) 3%,
        var(--bui-color-vip-end) 100%
      );
    }
  }

  &-outlined {
    border: var(--outlined-default-border);

    &.bui-btn-primary {
      .btn-outline(primary);
    }

    &.bui-btn-success {
      .btn-outline(success);
    }

    &.bui-btn-info {
      .btn-outline(info);
    }

    &.bui-btn-warning {
      .btn-outline(warning);
    }

    &.bui-btn-danger {
      .btn-outline(danger);
    }

    &.bui-btn-vip {
      .btn-outline(vip);
    }
  }

  &-light {
    background-image: none;
    background-color: var(--bui-color-gray-light);
    border: var(--light-border);

    &.bui-btn-warning {
      .btn-light(warning);
    }

    &.bui-btn-primary {
      .btn-light(primary);
    }

    &.bui-btn-info {
      .btn-light(info);
    }

    &.bui-btn-success {
      .btn-light(success);
    }

    &.bui-btn-danger {
      .btn-light(danger);
    }

    &.bui-btn-vip {
      color: var(--bui-color-vip);
      position: relative;
      background-color: fade(#ff866e, 30%);
    }
  }
}
